<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form>
                <FormItem label="分类：">
                    <TagSelect v-model="type" expandable>
                        <TagSelectOption name="type1">头部</TagSelectOption>
                        <TagSelectOption name="type2">脸部</TagSelectOption>
                        <TagSelectOption name="type3">足部</TagSelectOption>
                        <TagSelectOption name="type4">肩部</TagSelectOption>
                        <TagSelectOption name="type5">脚部</TagSelectOption>
                        <TagSelectOption name="type6">头部</TagSelectOption>
                        <TagSelectOption name="type7">脸部</TagSelectOption>
                        <TagSelectOption name="type8">足部</TagSelectOption>
                        <TagSelectOption name="type9">肩部</TagSelectOption>
                        <TagSelectOption name="type10">脚部</TagSelectOption>
                    </TagSelect>
                </FormItem>
                </Form>
                <Divider dashed />
                <Form inline :label-width="85">
                 <FormItem label="治疗日期：" style="width:460px;">
                <Select v-model="formItem.select" multiple :max-tag-count="3">
                <Option value="2019-05-03">2019-05-03</Option>
                <Option value="2019-04-06">2019-04-06</Option>
                <Option value="2019-03-21">2019-03-21</Option>
                <Option value="2019-02-21">2019-02-21</Option>
            </Select>
                </FormItem>
                <FormItem label="排序：" style="width:300px;">
                    <RadioGroup v-model="order">
                        <Radio label="order">顺序时间</Radio>
                        <Radio label="Reverse">倒序时间</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Card>
        <Row :gutter="24" class="ivu-mt">
            <Col
                :xl="compact ? 12 : 6"
                :lg="compact ? 12 : 8"
                :md="12"
                :sm="12"
                :xs="24"
                v-for="(item, index) in projectList"
                :key="index"
                class="ivu-mb"
            >
                <Card
                    :bordered="bordered"
                    dis-hover
                    :padding="0"
                    class="search-search-projects-item"
                >
                    <img :src="item.cover" class="search-search-projects-item-cover" />
                    <div class="ivu-p-8">
                        <div class="search-search-projects-item-extra ivu-mt-8 ivu-pb-8">
                            <span><Checkbox v-model="single">2019-10-08</Checkbox></span>
                            <span class="ivu-fr">
                                <Select v-model="model1">
                                    <Option
                                        v-for="item in cityList"
                                        :value="item.value"
                                        :key="item.value"
                                    >{{ item.label }}</Option>
                                </Select>
                            </span>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
        <FooterToolbar>
            <Button class="ivu-mr-16" type="warning" size="large">图片本地文件夹</Button>
            <Button class="v-mt-20" size="large">取消</Button>
            <Button type="error" class="v-mt-20" size="large">删除</Button>
            <Button type="primary" class="v-mt-20" size="large">保存</Button>
        </FooterToolbar>
    </div>
</template>
    </div>
</template>
<script>
    import dataList from './data';
    export default {
        name: 'detailed-Images',
        props: {
            compact: {
                type: Boolean,
                default: false
            },
            bordered: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                loading: false,
                model1: '',
                type: [],
                order: 'order',
                projectList: [],
                formItem:[
                    {
                     select: ''
                    }
                ],
                single: false,
                cityList: [
                    {
                        value: '头部',
                        label: '头部'
                    },
                    {
                        value: '足部',
                        label: '足部'
                    },
                    {
                        value: '手部',
                        label: '手部'
                    },
                    {
                        value: '脸部',
                        label: '脸部'
                    }
                ]
            }
        },
        methods: {
            getProject () {
                this.loading = true;
                setTimeout(() => {
                    this.projectList = dataList;
                    this.loading = false;
                }, 1000);
            }
        },
        mounted () {
            this.getProject();
        }
    }
</script>
<style lang="less">
.search-search-projects {
    &-item {
        &-cover {
            width: 100%;
            border-radius: 4px 4px 0 0;
        }
        &-desc {
            display: -webkit-box;
            height: 40px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        &-extra {
            span {
                display: inline-block;
                color: #808695;
                vertical-align: middle;
                margin-left: 10px;
            }
        }
    }
}
</style>
